<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="orderPageVo.name" placeholder="客户名"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="orderPageVo.orderStatus" clearable placeholder="订单状态">
          <el-option :value="0" label="待付款"/>
          <el-option :value="1" label="已付款"/>
          <el-option :value="2" label="已发货"/>
          <el-option :value="3" label="已核销"/>
          <el-option :value="4" label="已完成"/>
          <el-option :value="5" label="已取消"/>
        </el-select>
      </el-form-item>
      <el-form-item label="生成订单的时间">
        <el-date-picker
          v-model="orderPageVo.orderTime"
          type="datetime"
          placeholder="选择时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>
    <el-form-item>
        <el-select v-model="orderPageVo.isType" clearable placeholder="订单状态">
          <el-option :value="'虚拟物品'" label="虚拟物品"/>
          <el-option :value="'实物物品'" label="实物物品"/>

        </el-select>

      </el-form-item>
      <el-form-item>
        <el-select v-model="orderPageVo.paymentMethod" clearable placeholder="订单状态">
          <el-option :value="1" label="微信支付"/>
          <el-option :value="2" label="其他支付"/>

        </el-select>
      </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>

<!--      <router-link to="/trainer/add">
        <el-button type="primary" icon="el-icon-search">添加培训师</el-button>
      </router-link>-->

<!--      <el-button type="primary" icon="el-icon-search" @click="hadllerExport">导出数据</el-button>-->

    </el-form>
    <el-button type="primary" icon="el-icon-search" @click="hadllerExport()">导出数据</el-button>

    <!--数据显示列表-->
    <el-table fit highlight-current-row :data="dataList" >
      <el-table-column type="index" label="序号" width="70">
        <template slot-scope="scope">
          {{pageSize * (currentPage - 1) + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="订单编号" width="200" ></el-table-column>
      <el-table-column prop="name" label="会员名" width="200" ></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="200" >
        <template slot-scope="scope">
          <span v-if ="scope.row.orderStatus =='0'">待付款</span>
          <span v-else-if="scope.row.orderStatus =='1'" >已付款</span>
          <span v-else-if="scope.row.orderStatus =='2'" >已发货</span>
          <span v-else-if="scope.row.orderStatus =='3'" >已核销</span>
          <span v-else-if="scope.row.orderStatus =='4'" >已完成</span>
          <span v-else-if="scope.row.orderStatus =='5'" >已取消</span>
        </template>
      </el-table-column>
      <el-table-column prop="isType" label="订单类型" width="200" ></el-table-column>
      <el-table-column prop="orderTotalMoney" label="订单总金额" ></el-table-column>
<!--      <el-table-column prop="createTime" label="添加时间" width="160"></el-table-column>
      <el-table-column prop="sort" label="排序" width="60" ></el-table-column>-->
      <el-table-column label="操作" width="200" >
        <template slot-scope="scope">
          <router-link :to="'/order/edit/' + scope.row.orderId">
            <el-button type="primary" size="mini" icon="el-icon-edit"  >修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="remove(scope.row.id)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        class="pagination-container"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 2, 3, 4]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import order from "../../api/order";

  import axios from 'axios'
  import fileDownload from 'js-file-download'
  export default {
    data(){
      return{
        orderPageVo: {

        }    ,          // 加载的数据
        currentPage: 1 ,                 // 当前页数
        pageSize: 5  ,                  // 每页记录数
        total: 2,
        dataList:[]
      }
    },
    methods:{
      getList(value) {
        if (value == -1) {
          this.currentPage = 1;
        }
        order.getList(this.currentPage, this.pageSize, this.orderPageVo).then(res => {

          this.dataList = res.data.data
          this.total = res.total

          // console.log(res);
        })
      },
      // 重置搜索条件
      resetData(){
        // 清空查询条件
        this.orderPageVo ={}
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getList();
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.getList();
      },
      // 删除订单
      remove(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          order.deleteById(id).then(res=>{
            console.log(res);
            // 显示提示信息
            this.$message.success(res.message)
            this.getList(-1);
          });

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      hadllerExport(){
        console.log("===导出数据===");
        axios({
          method: 'get',
          url: "http://localhost:8080/order/export",
          responseType: 'blob', // 返回类型为数据流
          // 需要传参的话，在这传
        }).then(res => {
          if (res && res.data) {
            // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名
            fileDownload(res.data, "订单.xlsx")
          }
        })


      }
    },

    created() {
      this.getList();
    }
  }
</script>
